<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>订单详情</title>
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/jquery-weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.min.css" />

    <style>
        *{padding: 0;margin: 0;}
        .wpf_orderBox{position: relative;overflow-x: hidden;width: 100%;}
        .weui-cells,.weui-panel{margin-top: 0;}
        .weui-panel:before,.weui-media-box_appmsgs:nth-child(1):before{border-top: none;}
        .weui-media-box__br{flex: 0.5;text-align: right;vertical-align: top;height: 45px;}
        .weui-media-box_appmsg .weui-media-box__hd{width: 70px;height: 70px;}
        .weui-media-box__title{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;white-space: pre-wrap;line-height: 18px;font-size: 16px;}
        .weui-media-box_appmsgs{display: block;position: relative;}
        .weui-media-box_appmsgs:before {content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #E5E5E5;color: #999999;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);left: 15px;}
        .apply_for_box{width: 100%;position: relative;padding: 5px 15px 15px 15px;box-sizing: border-box;display: flex;flex-direction: row-reverse;}
        .apply_for{width: 100px;text-align: center;border: 1px solid #e5e5e5;border-radius: 15px;font-size: 14px;color: #999999;}
        .weui-media-box__num{color: #AEAEAE;font-size: 12px;}
        .weui-cell_js{font-size: 12px;}
        .weui-cell_js:before{border-top: none;}
        .weui-cell_js:after{border-bottom: none;}
        .weui-cell_js .weui-cell{padding: 0 15px;box-sizing: border-box;color: #999999;}
        .weui-cell_last{padding-bottom: 10px;box-sizing: border-box;}
        .weui-cell_last .weui-cell,.weui-cell_last .weui-cell__ft{font-size: 14px;color: #000000;}
        .weui-cell__ft_m{color: #FC7B26;}
        .weui-cell_fash{padding-top: 10px;box-sizing: border-box;}

        .site_box{width: 100%;display: flex;position: relative;padding: 10px 15px;box-sizing: border-box;}
        .site_L{flex: 0.1;}
        .site_img{width: 25px;height: 25px;position: absolute;top: calc(50% - 15px);}
        .site_img img{width: 100%;height: 100%;}
        .site_R{flex: 0.9;color: #707070;font-size: 14px;}
        .site_name_box{display: flex;}
        .site_name{flex: 1}
        .site_phone{flex: 1;text-align: right;}
        .site_name_txt{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;white-space: pre-wrap;line-height: 20px;}
        .order_number{width: 100%;position: relative;padding: 10px 15px;box-sizing: border-box;}
        .order_serial{color: #999999;font-size: 12px;}
        .suspension{width: 100%;height:45px;overflow: hidden;position: fixed;bottom: 0;left: 0;background: #ffffff;z-index: 10;display: flex;flex-direction: row-reverse;align-items: center;border-top: 1px solid #e5e5e5;padding-right: 5px;box-sizing: border-box;}
        .suspension_c{width: 90px;padding: 2px 0;box-sizing: border-box;text-align: center;border: 1px solid #e5e5e5;border-radius: 15px;font-size: 14px;color: #999999;margin-right: 5px;}
        .suspension_q{color: #FC7B26;border: 1px solid #FC7B26;}
        .suspension_gd{padding-right: 10px;box-sizing: border-box;font-size: 14px;color: #999999;}
    </style>
</head>
<body>
    <div class="wpf_orderBox">
        <div class="site_box">
            <div class="site_L">
                <div class="site_img">
                    <img src="__PUBLIC__/orderImg/site.svg" alt="">
                </div>
            </div>
            <div class="site_R">
                <div class="site_name_box">
                    <div class="site_name">收货人：<span class="sh_name"></span></div>
                    <div class="site_phone"></div>
                </div>
                <div class="site_name_txt">收货地址：<span class="site_name_txt_dz"></span></div>
            </div>
        </div>
        <div style="height: 8px;background: #e5e5e5;"></div>
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__bd weui-panel__bd_list">

            </div>
        </div>
        <div class="weui-cells weui-cell_js weui-cell_fash">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>商品总价</p>
                </div>
                <div class="weui-cell__ft">￥<span class="weui-cell__ft_money"></span></div>
            </div>
        </div>
        <div class="weui-cells weui-cell_js">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>运费(快递)</p>
                </div>
                <div class="weui-cell__ft">￥<span class="weui-cell__ft_yf"></span></div>
            </div>
        </div>
        <div class="weui-cells weui-cell_js weui-cell_last">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>订单总价</p>
                </div>
                <div class="weui-cell__ft">￥<span class="weui-cell__ft_sumMoney"></span></div>
            </div>
        </div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>实付款</p>
                </div>
                <div class="weui-cell__ft weui-cell__ft_m">￥<span class="weui-cell__ft_sumMoney"></span></div>
            </div>
        </div>
        <div style="height: 8px;background: #e5e5e5;"></div>
        <div class="order_number">
            <div class="order_serial">订单编号：<span class="order_serial_number"></span></div>
            <div class="order_serial">创建时间：<span class="order_serial_time"></span></div>
        </div>
        <div style="height: 45px;"></div>
        <div class="suspension">
            <div class="suspension_c suspension_q">确认收货</div>
            <div class="suspension_c suspension_y">延长收货</div>
            <div class="suspension_c suspension_w">查看物流</div>
            <div class="suspension_gd">更多</div>
        </div>
    </div>
</body>
</html>
<script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="http://cdn.suoluomei.com/common/js/jquery-weui.js"></script>
<script>
    $(document).ready(function (){
        let key = '2b029d40d498184def791ff46e189670'
        let code = "10408030450361573078"
        $.ajax({
            type: "POST",
            url: 'http://test2.herbplantist.com/api/apiRequest2.php?m=getOrderInfo',
            data: {
                key: key,
                code: code,
            },
            dataType: "json",
            success: function (res) {
                console.log(res)
                if(res.errcode == 0){
                    $('.sh_name').html(res.data.contact)
                    $('.site_phone').html(res.data.phone)
                    $('.site_name_txt_dz').html(res.data.address)
                    $('.weui-cell__ft_money').html(res.data.productmoney)
                    $('.weui-cell__ft_yf').html(res.data.franking)
                    $('.weui-cell__ft_sumMoney').html(res.data.money)
                    $('.order_serial_number').html(res.data.code)
                    $('.order_serial_time').html(res.data.createtime)
                    for (let i = 0; i < res.data.goods.length; i++) {
                        let myli = ' <div class="weui-media-box_appmsg weui-media-box_appmsgs">\n' +
                            '                    <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">\n' +
                            '                        <div class="weui-media-box__bd">\n' +
                            '                            <h4 class="weui-media-box__title">'+res.data.goods[i].name+'</h4>\n' +
                            '                        </div>\n' +
                            '                        <div class="weui-media-box__br">\n' +
                            '                            <div class="weui-media-box__money">￥'+res.data.goods[i].saleprice+'</div>\n' +
                            '                            <div class="weui-media-box__num">x'+res.data.goods[i].num+'</div>\n' +
                            '                        </div>\n' +
                            '                    </a>\n' +
                            '                    <div class="apply_for_box">\n' +
                            '                        <a class="apply_for" href="__CONTROLLER__/service_type">申请售后</a>\n' +
                            '                    </div>\n' +
                            '                </div>';
                        $('.weui-panel__bd_list').append(myli);
                    }
                }else{

                }
            }
        })
    });
</script>